<template>
	<view class="login">
		<view class="cantainer">
			<view>
				<view class="bold">手机号</view>
				<view>
					<input class="uni-input" placeholder="请输入您的手机号" />
				</view>
				<view class="bold">验证码</view>
				<view class="box">
					<input class="uni-input" placeholder="请输入验证码" />
					<view class="yzmBox">
						<button class="yzm">获取验证码</button>
					</view>
					
				</view>
				<view class="bold">新密码</view>
				<view>
					<input class="uni-input" placeholder="请输入您的新密码" type="password" />
				</view>
			</view>
			<button class="btn" @click="login">完成</button>
		</view>
		<view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'page',
		};
	},
	onLoad() {

	},
	methods: {
		login() {
			uni.setStorageSync('token', 111)
			uni.switchTab({
				url: '/pages/tabBar/tabBar1'
			});
		}

	}
}
</script>

<style lang="scss">
.box {
	position: relative;
}
.yzmBox {
	position: absolute;
	right: 0;
	top: 0;
}
.yzm {
	width: 112px;
	height: 32px;
	line-height: 32px;
	border-radius: 24px;
	color: rgba(17, 168, 163, 1);
	font-size: 16px;
	text-align: center;
	border: 1px solid rgba(17, 168, 163, 1);
}

.btn {
	width: 100%;
	height: 48px;
	margin: 20px auto;
	line-height: 48px;
	border-radius: 24px;
	background: linear-gradient(87.6deg, rgba(17, 168, 163, 1) 2.64%, rgba(132, 219, 187, 1) 96.87%);
	color: rgba(255, 255, 255, 1);
	font-size: 16px;
	text-align: center;
}

.uni-input {
	height: 40px;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

.logo {
	width: 43px;
	height: 44px;
	margin: 40px 0 10px;
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
</style>
